<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>用户注册</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
<link rel="stylesheet" href="__PUBLIC__/css/font-awesome.css">
<link rel="stylesheet" href="__PUBLIC__/css/stylelog.css">
<link rel="stylesheet/less" href="__PUBLIC__/css/stylelog.less" />
<script src="__PUBLIC__/js/less-1.5.0.min.js"></script> 
<script src="__PUBLIC__/js/jquery-1.11.0.min.js"></script>
<script src='__PUBLIC__/js/jquery.validate.min.js'></script>
<script src="__PUBLIC__/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/bootbox.js"></script>
<script>
        $(document).ready(function() {
            function validateform() {
                return $("#form").validate({
                        rules: {
                            'phone': {
                                required: true
                            },
                            'validate': {
                                required: true,
                            }
                        },
                        messages: {
                            'phone': {
                                required: '请填写手机号码'
                            },
                            'validate': {
                                required: '请填写验证码'
                            }
                        }
                    }).form();
          }
            $("#validate").on('click',function(event) {
                event.preventDefault();
                var val = $("#phone").val();
                var isPhone = /^1[3|4|5|8]\d{9}$/;
                if(isPhone.test(val)) {
                    $("#validate").attr('disabled' , true);
                    $.get('__URL__/validate','phone='+val,function(result){
                        result = result.trim();
                        //alert(result);
                        if(result == 'ok') {
                            var sum = 60;
                            var t = setInterval(function() {
                                $("#validate").html(sum+'秒后可以重新发送');
                                sum--;
                                if(sum<=0) {
                                    clearInterval(t);
                                    $("#validate").html('获取验证码');
                                    $("#validate").attr('disabled' , false);
                                }
                            },1000);
                        } else {
                            $("#validate").attr('disabled' , false);
                            bootbox.alert('操作失败');
                            
                        }
                    });
                } else {
                         bootbox.alert('请填写正确的手机号码');
                }
            });
    
            /*$('input').keydown(function(event) {
                if(event.keyCode == 13) {
                    $("#submit").trigger('click');
                }          
             });*/

            $("#submit").on('click',function() {
                var formdata = new FormData($("#form")[0]);
                var result = validateform();
                if(result) {
                   $.ajax({
                     url: '__URL__/login',
                     data: formdata,
                     type: 'POST',
                     contentType: false,
                     processData: false,
                     success: function(res) {
                        if(res == 'ok') {
                            window.location.href = "{:U('Index/index')}";
                        	//bootbox.alert(res);
                        } else {
                            bootbox.alert(res);
                        }
                     }
                   });
                }  
            });
        });
</script>
</head>
<body>
    <div id="validate-container"  class="container body-bg">
        <div id="header" style="height:50px;">
            
        </div>
        <div id="main" >
            <form action="" class="form-inline" id="form">
                <div class="main-div">
                    <div  class="secendary-div  ">手机号</div>
                    <input type="text"  class="secendary-input form-control " id="phone" name="phone" placeholder="请输入手机号码">
                </div>
                <div class="main-div">
                    <div  class="secendary-div">验证码</div>
                    <input type="text"  class="secendary-input form-control" name="validate" placeholder="请输入验证码">
                </div>
                     <div id="validate" class="btn btn-default  btn-xs">
                        获取验证码
                     </div>
               <button type="button"  class="btn btn-default btn-lg" id="submit">进入许愿树</button>
            </form>
        </div>
        <div id="footer" >
        </div>
    </div>

</body>
</html>
